<h1>{{ title }}</h1>

<section class="tlp-pane">
    <div class="tlp-pane-container">
        <div class="tlp-pane-header">
            <h2 class="tlp-pane-title">
                <i class="tlp-pane-title-icon fa fa-list"></i>
                {{ description_fields_header }}
            </h2>
        </div>
        <section class="tlp-pane-section">
            <div class="tlp-table-actions">
                <button type="button" id="add-description-field-button" class="tlp-button-primary tlp-table-actions-element">
                    <i class="tlp-button-icon fa fa-plus"></i> {{ btn_add_field }}
                </button>

                {{> add_description_field_modal }}
            </div>
            <table class="tlp-table">
                <thead>
                    <tr>
                        <th>{{ name_header }}</th>
                        <th>{{ description_header }}</th>
                        <th>{{ require_header }}</th>
                        <th>{{ type_header }}</th>
                        <th
                            class="tlp-table-cell-numeric tlp-tooltip tlp-tooltip-right"
                            data-tlp-tooltip="{{ rank_tooltip }}"

                        >{{ rank_header }}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {{# description_fields }}
                    <tr>
                        <td class="siteadmin-description-fields-name-column">{{ name }}</td>
                        <td class="siteadmin-description-fields-description-column">{{{ purified_description }}}</td>
                        <td>
                            <form id="description-field-form-required-{{ id }}" action="" method="POST">
                                {{# required_value }}
                                    <input type="hidden" name="remove_required_desc_id" value="{{ id }}">
                                {{/ required_value }}
                                {{^ required_value }}
                                    <input type="hidden" name="make_required_desc_id" value="{{ id }}">
                                {{/ required_value }}

                                <div class="tlp-switch">
                                    <input type="checkbox"
                                        id="description-field-required-switch-{{ id }}"
                                        class="tlp-switch-checkbox description-field-required-switch"
                                        data-form-id="description-field-form-required-{{ id }}"
                                        {{# required_value }}checked{{/ required_value }}
                                    >
                                    <label for="description-field-required-switch-{{ id }}" class="tlp-switch-button">{{ required_label }}</label>
                                </div>
                            </form>
                        </td>
                        <td class="siteadmin-description-fields-type-column">{{ type_label }}</td>
                        <td class="tlp-table-cell-numeric">{{ rank_on_screen }}</td>
                        <td class="tlp-table-cell-actions">
                            <button
                                type="button"
                                class="tlp-button-primary tlp-button-small tlp-button-outline tlp-table-cell-actions-button edit-description-field-button"
                                data-modal-id="edit-description-field-modal-{{ id }}"
                            >
                                <i class="tlp-button-icon fa fa-pencil"></i> {{ edit_btn }}
                            </button>
                            <button
                                type="button"
                                class="tlp-button-danger tlp-button-small tlp-button-outline tlp-table-cell-actions-button delete-description-field-button"
                                data-modal-id="delete-description-field-modal-{{ id }}"
                            >
                                <i class="tlp-button-icon fa fa-trash-o"></i> {{ delete_btn }}
                            </button>

                            {{> edit_description_field_modal }}
                            {{> delete_description_field_modal }}
                        </td>
                    </tr>
                    {{/ description_fields }}
                    {{^ description_fields }}
                        <tr>
                            <td colspan="6" class="tlp-table-cell-empty">
                                {{ no_description_fields }}
                            </td>
                        </tr>
                    {{/ description_fields }}
                </tbody>
            </table>
        </section>
    </div>
</section>
